<template lang="pug">
.index
  .index-container
    .index-title 注 册
    .form
      el-form(label-width="100px", :model="form", :rules="rules" ref="ruleForm")
        el-form-item(label="账号：")
          el-radio-group(v-model="form.type" @change="changeType")
            el-radio(:label="1") 设计师
            el-radio(:label="2") 材料商
        el-form-item(label="用户名：" prop="userName")
          el-input(v-model="form.userName" placeholder="输入用户名")
        el-form-item(label="手机号：" prop="mobile")
          el-input(v-model="form.mobile" placeholder="输入手机号码")
        el-form-item(label="验证码：" prop="msgCode")
          .form-item
            el-input(v-model="form.msgCode" placeholder="输入验证码" autocomplete="new-password")
            el-button(@click="sendCode" :disabled="time ? true : false") {{time ? '重发验证码'+ time : '获取验证码'}}
        el-form-item(label="密码：" prop="password")
          el-input(v-model="form.password" placeholder="输入密码" type="password" autocomplete="new-password")
        el-form-item(label="公司名称：" v-if="form.type == 2" prop="companyName")
          el-input(v-model="form.companyName" placeholder="输入公司名称")
        el-form-item(label="主营业务：" v-if="form.type == 2")
          el-select(v-model="form.mainBusiness" multiple filterable placeholder="请选择")
            el-option(
              v-for="item in cates"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            )
      .form-button
        el-button(@click="submit") 注册
</template>

<script>
import { toRegister, toSendMsg, getFirstCategory } from 'api'
import { hex_md5_salt } from 'utils/md5'
let timer = null
export default {
  name: 'register',
  data () {
    return {
      form: {
        userName: '',
        password: '',
        mobile: '',
        msgCode: '',
        type: 1,
        companyName: '',
        mainBusiness: []
      },
      time: 0,
      cates: [],
      rules: {
        userName: [
          { required: true, message: '请输入账号!!', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码!!', trigger: 'blur' },
          { min: 6, message: '密码应当是至少6位的字母+数字!!', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号!!', trigger: 'blur' },
          { pattern: /^[1][2,3,4,5,6,7,8,9][0-9]{9}$/, message: '手机号格式错误!!', trigger: 'blur' }
        ],
        msgCode: [
          { required: true, message: '请输入验证码!!', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '请输入公司名称!!', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    codeTimer () {
      this.time = 60
      timer = setInterval(() => {
        this.time--
        if (this.time <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    changeType (value) {
      if (value === 2) this.getFirstCategory()
    },
    async getFirstCategory() {
      try {
        const { ResultSet } = await this.$axios.post(getFirstCategory)
        this.cates = ResultSet.userData.firstCategory
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async sendCode () {
      try {
        if (!this.form.mobile) {
          this.$message.error('请先输入手机号码！')
          return
        }
        await this.$axios.post(toSendMsg, { mobile: this.form.mobile, type: this.form.type })
        this.codeTimer()
        this.$message.success('短信验证码已发送')
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async submit () {
      try {
        let query = { ...this.form }
        if (this.form.type === 1) {
          delete query.companyName
          delete query.mainBusiness
        }
        this.$refs['ruleForm'].validate(async (valid) => {
          if (valid) {
            await this.$axios.post(toRegister, { ...query, password: hex_md5_salt(query.password) })
          }
        })
      } catch (err) {
        this.$message.error(err.ResultSet.errors)
      }
    }
  },
  mounted () {}
} 
</script>

<style lang="scss" scoped>
.index {
  height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.index-title {
  text-align: center;
  color: #bf1a21;
  margin-bottom: 18px;
  font-size: 26px;
}
.form {
  width: 500px;
  min-height: 340px;
  background: #fff;
  border-radius: 5px;
  padding: 30px 50px;
  .el-select {
    width: 100%;
  }
}
.form-item {
  display: flex;
  align-items: center;
  .el-button {
    margin-left: 10px;
  }
}
.form-button {
  .el-button {
    width: 100%;
  }
}
</style>
